import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/common/common.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:oramemo/common/styles/colors.dart';
import 'package:oramemo/generated/assets.dart';
import 'package:oramemo/pages/record/record_router.dart';

import 'recording_logic.dart';
import 'recording_state.dart';
import 'widget/DashedLind.dart';

class RecordingPage extends StatelessWidget {
  const RecordingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final RecordingLogic logic = Get.put(RecordingLogic());
    final RecordingState state = Get.find<RecordingLogic>().state;

    return Container(
      width: Get.width,
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 14.h),
          Row(
            children: [
              SizedBox(width: 16.h),
              Expanded(
                child: SizedBox(
                  height: 48.h,
                  child: TextField(
                    onChanged: (value) => state.searchKeyword.value = value,
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: const Color(0xFFF3F5F9),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(24.r),
                        borderSide: BorderSide.none,
                      ),
                      hintText: '请输入音频文稿内容',
                      hintStyle: TextStyle(
                        color: const Color(0xFF979797),
                        fontSize: 14.sp,
                        fontFamily: 'Inter',
                        fontWeight: FontWeight.w400,
                        letterSpacing: 1,
                      ),
                      prefixIcon: Padding(
                        padding: const EdgeInsets.only(left: 12.0),
                        child: Icon(
                          Icons.search,
                          size: 26.r,
                          color: Colours.text,
                        ),
                      ),
                      contentPadding: EdgeInsets.symmetric(
                        horizontal: 20.w,
                        vertical: 0.h,
                      ),
                    ),
                    keyboardType: TextInputType.text,
                  ),
                ),
              ),
              GestureDetector(
                onTap: () => logic.showSortFilterDialog(),
                child: Container(
                  padding: EdgeInsets.only(left: 11.0.w, right: 14.w),
                  child: IconX.image(
                    Assets.transcriptionSelects,
                    size: 25.r,
                  ),
                ),
              ),
            ],
          ),
          SizedBox(height: 14.h),
          _buildTagsList(),
          SizedBox(height: 16.h),
          Padding(
            padding: EdgeInsets.only(left: 32.w),
            child: Obx(() => Text(
                  '音频 (${state.audioList.length})',
                  style: TextStyle(
                      fontSize: 20.sp,
                      color: Colours.textDeepBlue,
                      fontWeight: FontWeight.bold),
                )),
          ),
          SizedBox(height: 16.h),
          Expanded(
            child: Obx(() => state.audioList.isEmpty
                ? _buildEmptyState()
                : _buildAudioList(state)),
          ),
        ],
      ),
    );
  }

  Widget _buildTagsList() {
    return Container(
      height: 24.h,
      padding: EdgeInsets.only(left: 16.w),
      child: ListView(
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.symmetric(horizontal: 8.w),
        children: [
          _buildTagItem('标签', false),
          _buildTagItem('历史搜索过的标签', true),
          _buildTagItem('标签', false),
        ],
      ),
    );
  }

  Widget _buildTagItem(String text, bool isSelected) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 2.h),
      margin: EdgeInsets.symmetric(horizontal: 4.w),
      decoration: BoxDecoration(
        color: isSelected ? const Color(0xFFD9D9D9) : const Color(0xFFD9D9D9),
        borderRadius: BorderRadius.circular(8.r),
      ),
      alignment: Alignment.center,
      child: Text(
        text,
        style: TextStyle(
          fontSize: 14.sp,
          color: Colours.text,
        ),
      ),
    );
  }

  Widget _buildEmptyState() {
    return Center(
      child: Text(
        '暂无音频记录',
        style: TextStyle(
          fontSize: 16.sp,
          color: Colors.grey,
        ),
      ),
    );
  }

  Widget _buildAudioList(RecordingState state) {
    return ListView.builder(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      itemCount: state.audioList.length,
      itemBuilder: (context, index) {
        return _buildAudioItem(index);
      },
    );
  }

  Widget _buildAudioItem(int index) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '2025/3/10',
          style: TextStyle(
            fontSize: 14.sp,
            color: Colours.textDeepBlue,
            fontWeight: FontWeight.w500,
          ),
        ),
        Text(
          '下午：17:00',
          style: TextStyle(
            fontSize: 12.sp,
            color: Colours.text_gray,
          ),
        ),
        Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            Container(
              width: 1.w,
              height: 210.h,
              margin: EdgeInsets.only(top: 3.h),
              child: DashedLind(
                axis: Axis.vertical,
                dashedHeight: 5.w,
                count: 22,
                color: Colours.text_gray_c,
              ),
            ),
            const SizedBox(width: 28),
            Expanded(
              child: Container(
                width: double.infinity,
                margin: EdgeInsets.only(top: 13.h),
                decoration: BoxDecoration(
                  color: const Color(0xFFF9FBFF),
                  borderRadius: BorderRadius.circular(32.r),
                  border: Border.all(color: Color(0x262574FF)),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: EdgeInsets.fromLTRB(
                        16.w,
                        24.w,
                        24.w,
                        16.w,
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Expanded(
                                child: Container(
                                  height: 40.h,
                                  decoration: BoxDecoration(
                                    color: Colours.app_main,
                                    borderRadius: BorderRadius.circular(8.r),
                                  ),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      Text(
                                        '28:11',
                                        style: TextStyle(
                                          fontSize: 12.sp,
                                          color: Colors.white,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      SizedBox(width: 10.w),
                                      Container(
                                        width: 20.w,
                                        height: 20.h,
                                        decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            border: Border.all(
                                                color: Colors.white, width: 2)),
                                        child: Icon(
                                          Icons.play_arrow,
                                          color: Colors.white,
                                          size: 16.r,
                                        ),
                                      ),
                                      SizedBox(width: 16.w),
                                    ],
                                  ),
                                ),
                              ),
                              SizedBox(width: 10.w),
                              InkWell(
                                onTap: (){Get.toNamed(RecordRouter.recorddetailsPage);},
                                child: Container(
                                  height: 40.h,
                                  width: 56.w,
                                  decoration: BoxDecoration(
                                    color: Colors.green,
                                    borderRadius: BorderRadius.circular(8.r),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '详情',
                                    style: TextStyle(
                                      fontSize: 16.sp,
                                      color: Colors.white,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 12.h),
                          Text(
                            '转写成功提取的标题',
                            style: TextStyle(
                              fontSize: 16.sp,
                              color: Colours.textDeepGray,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 6.h),
                          Text(
                            '显示转写后提取的内容总结，内容总结字数控制在100字以内。',
                            style: TextStyle(
                              fontSize: 14.sp,
                              color: Colours.text_gray,
                            ),
                          ),
                          SizedBox(height: 16.h),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Icon(
                                index % 2 == 0
                                    ? Icons.visibility
                                    : Icons.visibility_off,
                                color: Colours.text,
                                size: 25.r,
                              ),
                              SizedBox(width: 24.w),
                              Text(
                                '权限',
                                style: TextStyle(
                                  fontSize: 16.sp,
                                  color: Colours.text,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
        SizedBox(
          height: 32.h,
        ),
      ],
    );
  }
}
